import React, { Component } from 'react'
import { Card, Button, Modal } from 'antd'
import './ui.less'

export default class Modals extends Component{
    state = {
        loading: false,
        showModal1: false,
        showModal2: false,
        showModal3: false,
        showModal4: false,
        showModal5: false
    }
    handleOpen = (type) => {
        this.setState({
            [type]: true
        })
    }
    handleConfirm = (type) => {
        Modal[type]({
            title:'确认？',
            content:'你确定你学会了React了吗？',
            // onOk(){
            //     console.log('Ok')
            // },
            // onCancel(){
            //     console.log('Cancel')
            // } 
        })
    }
    handleSubmit = () => {
        this.setState({
            loading: true
        })
        setTimeout(() => {
            this.setState({
                loading: false,
                showModal3: false
            })
        },2000)
    }
    render() {
        return(
            <div>
                <Card title="基础模态框" className="card-wrap">
                    <Button type="primary" onClick={() => this.handleOpen('showModal1')}>Open</Button>
                    <Button type="primary" onClick={() => this.handleOpen('showModal2')}>自定义页脚</Button>
                    <Button type="primary" onClick={() => this.handleOpen('showModal3')}>自定义页脚 loading状态</Button>
                    <Button type="primary" onClick={() => this.handleOpen('showModal4')}>顶部20px弹框</Button>
                    <Button type="primary" onClick={() => this.handleOpen('showModal5')}>水平垂直居中</Button>
                </Card>
                <Card title="信息确认框" className="card-wrap">
                    <Button type="primary" ghost onClick={() => this.handleConfirm('confirm')}>Confirm</Button>
                    <Button type="danger" ghost onClick={() => this.handleConfirm('info')}>Info</Button>
                    <Button type="dashed" onClick={() => this.handleConfirm('success')}>Success</Button>
                    <Button type="danger" ghost onClick={() => this.handleConfirm('warning')}>Warning</Button>
                </Card>
                <Modal
                    title="Open"
                    visible={this.state.showModal1}
                    onOk={() => {
                        this.setState({
                            showModal1: false
                        })
                    }}
                    onCancel={() => {
                        this.setState({
                            showModal1: false
                        })
                    }}>
                    <p>some contents...</p>
                    <p>some contents...</p>
                    <p>some contents...</p>
                </Modal>
                <Modal
                    title="自定义页脚"
                    visible={this.state.showModal2}
                    okText="好的"
                    cancelText="算了"
                    onOk={() => {
                        this.setState({
                            showModal2: false
                        })
                    }}
                    onCancel={() => {
                        this.setState({
                            showModal2: false
                        })
                    }}>
                    <p>some contents...</p>
                    <p>some contents...</p>
                    <p>some contents...</p>
                </Modal>
                <Modal
                    title="自定义页脚  loading状态"
                    visible={this.state.showModal3}
                    footer={[
                        <Button key="back" size="large" onClick={() => {
                            this.setState({
                                showModal3: false
                            })
                        }}>Return</Button>,
                        <Button key="submit" size="large" type="primary" loading={this.state.loading} onClick={this.handleSubmit}>Submit</Button>

                    ]}>
                    <p>some contents...</p>
                    <p>some contents...</p>
                    <p>some contents...</p>
                </Modal>
                <Modal
                    title="React"
                    style={{top:20}}
                    visible={this.state.showModal4}
                    onOk={() => {
                        this.setState({
                            showModal4: false
                        })
                    }}
                    onCancel={() => {
                        this.setState({
                            showModal4: false
                        })
                    }}
                >
                    <p>欢迎学习慕课新推出的React高级课程</p>
                </Modal>
                <Modal
                    title="React"
                    wrapClassName="vertical-center-modal"
                    visible={this.state.showModal5}
                    onOk={() => {
                        this.setState({
                            showModal5: false
                        })
                    }}
                    onCancel={() => {
                        this.setState({
                            showModal5: false
                        })
                    }}
                >
                    <p>欢迎学习慕课新推出的React高级课程</p>
                </Modal>
            </div>    
        )
    }
}